<!--  -->
<template>
  <a-modal
    title="新增用户"
    :visible="addFastVisible"
    :width="540"
    @cancel="closeDrawer"
    @ok="handleOk">
    <a-form-model ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="账户" prop="account">
        <a-input v-model="form.account" :maxLength="10" placeholder="格式只能数字和英文" />
      </a-form-model-item>
      <a-form-model-item label="用户名" prop="userName">
        <a-input v-model="form.userName" :maxLength="20" />
      </a-form-model-item>
      <a-form-model-item label="成员姓名" prop="name">
        <a-input v-model="form.name" :maxLength="10" />
      </a-form-model-item>
      <a-form-model-item label="邮箱" prop="email">
        <a-input v-model="form.email" />
      </a-form-model-item>
      <a-form-model-item label="手机" prop="phone">
        <a-input v-model="form.phone" />
      </a-form-model-item>
      <a-form-model-item label="用户类型" prop="type">
        <a-select v-model="form.type" placeholder="请选择用户类型" @change="changeUserType">
          <a-select-option v-for="(item, index) in $const.USER_TYPE" :value="item.value" :key="index">{{
            item.desc
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="职务" prop="position" v-if="showOrganization">
        <a-input v-model="form.position" />
      </a-form-model-item>
      <a-form-model-item label="机构" ref="orgId" prop="orgId" v-if="showOrganization">
        <a-select v-model="form.orgId" placeholder="请选择机构" @change="handleSelect" allowClear>
          <a-select-option v-for="item in orgList" :value="item.id" :key="item.id">{{
            item.orgName
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="科室" prop="orgHospitalDeptId" v-if="showArea">
        <a-select v-model="form.orgHospitalDeptId" placeholder="请选择所属科室" allowClear>
          <a-select-option v-for="(item, index) in depList" :value="item.id" :key="index">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="系统管理员" prop="isAdmin">
        <a-select v-model="form.isAdmin" @change="handleAdminChange">
          <a-select-option :value="1">是</a-select-option>
          <a-select-option :value="0">否</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="角色" prop="roleId" v-if="form.isAdmin">
        <a-select v-model="form.roleId" placeholder="请选择角色" allowClear>
          <a-select-option v-for="(item, index) in roleList" :value="item.id" :key="index">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import monitor from '@/utils/monitor'
import fastAddUser from '@/monitor/components/invitationModal/addDrawer'

import { getOrgList, addUserFast } from '@/api/system/user'
import { listOrgDepts } from '@/api/common'
import { roleList } from '@/api/system/role.js'

const watch = monitor(fastAddUser)

export default {
  name: '',
  props: {
    addFastVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {
        isAdmin: 0,
        orgHospitalDeptId: null
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      loading: false,
      orgList: [], // 机构list
      depList: [], // 科室list
      rules: {
        account: [
          { required: true, message: '请输入账户' },
          { pattern: /^[0-9a-zA-Z_]{1,}$/, message: '账户格式只能数字和英文' }
        ],
        userName: [{ required: true, message: '请输入用户名' }],
        name: [
          { required: false, message: '请输入姓名' },
          { pattern: /^.{1,10}$/, message: '姓名格式错误' }
        ],
        email: [
          { required: false, message: '请输入邮箱' },
          { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '邮箱格式错误' }
        ],
        phone: [
          { required: true, message: '请输入手机' },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号格式错误' }
        ],
        position: [{ required: false, message: '请输入职务' }],
        // orgId: [{ required: false, message: '请选择组织机构' }],
        // orgHospitalDeptId: [{ required: false, message: '请选择科室' }],
        type: [{ required: true, message: '请选择类型' }],
        isAdmin: [{ required: true, message: '请选择' }]
        // roleId: [{ required: false, message: '请选择角色' }]
      },
      roleList: [],
      showOrganization: false,
      showArea: false
    }
  },
  mounted () {
    this.getOrgList()
    this.getRoleList()
  },
  methods: watch({
    // 获取组织机构
    getOrgList () {
      getOrgList().then(res => {
        this.orgList = res
      })
    },
    // // 获取角色list
    getRoleList () {
      roleList().then(res => {
        this.roleList = res
      })
    },
    // 获取科室列表
    getAreaList () {
      // getAreaList({ orgId: this.form.orgId })
      if (this.form.orgId) {
        listOrgDepts({ orgId: this.form.orgId })
          .then(res => {
            this.depList = res
          })
          .catch(() => {})
      }
    },
    // select 回调
    handleSelect (val) {
      this.depList = []
      console.log(val, this.orgList, '科室列表***********')
      const target = this.orgList.find(item => item.id === val)
      console.log(target, 'target***********')
      this.showArea = target && target.type === 2 ? 1 : 0
      this.form.orgHospitalDeptId = null
      this.getAreaList()
    },
    // 系统管理员下拉框改变
    handleAdminChange (val) {
      this.form.isAdmin = val
      this.$forceUpdate()
    },
    // 用户类型下拉改变
    changeUserType (val) {
      this.showOrganization = val === 2 ? 1 : 0
      this.$forceUpdate()
    },
    // 确定回调
    handleOk () {
      this.createUser()
      this.$refs.formRef.validate(valid => {
        if (valid) {
          addUserFast(this.form).then(res => {
            this.$message.success('操作成功！')
            this.closeDrawer()
          })
        }
      })
    },
    // 关闭对话框重置表单
    closeDrawer () {
      this.$emit('closeDrawer')
      this.$refs.formRef.resetFields()
      this.form = this.$options.data().form
    },
    // 快捷新建用户埋点
    createUser () {}
  })
}
</script>
<style scoped lang="less"></style>
